import React, { useEffect, useState } from "react";
import { AppstoreOutlined, MailOutlined, SettingOutlined } from "@ant-design/icons";
import { Menu, Switch } from "antd";
import sideStyle from "./css/side.module.less";
import { useNavigate } from "react-router-dom";
import store from "../../store/store";
import { useDispatch, useSelector } from "react-redux";

export default function Side() {
  const nowTheme = useSelector((state) => state.user.theme);

  let useNavigateGo = useNavigate();
  const items = [
    {
      key: "sub1",
      label: "Navigation One",
      icon: <MailOutlined />,
      children: [
        {
          key: "normalTable",
          label: "普通表格",
        },
        {
          key: "titleTable",
          label: "表头表格",
        },
        {
          key: "checkboxTable",
          label: "可以缓存表格checkbox",
        },
        {
          key: "bigSreen",
          label: "大屏",
        },
      ],
    },
    {
      key: "sub2",
      label: "表单",
      icon: <AppstoreOutlined />,
      children: [
        {
          key: "simpleForm",
          label: "简单表单",
        },
        {
          key: "tableForm",
          label: "表格表单",
        },
        {
          key: "sub3",
          label: "Submenu",
          children: [
            {
              key: "7",
              label: "Option 7",
            },
            {
              key: "8",
              label: "Option 8",
            },
          ],
        },
      ],
    },
    {
      key: "sub4",
      label: "Navigation Three",
      icon: <SettingOutlined />,
      children: [
        {
          key: "9",
          label: "Option 9",
        },
        {
          key: "10",
          label: "Option 10",
        },
        {
          key: "11",
          label: "Option 11",
        },
        {
          key: "12",
          label: "Option 12",
        },
      ],
    },
  ];

  const [theme, setTheme] = useState("dark");
  const [current, setCurrent] = useState("1");
  const changeTheme = (value) => {
    setTheme(value ? "dark" : "light");
  };
  let state = store.getState();
  //   store.dispatch({ type: "changeMeun", meuns: [11111111, 2222222] });

  const onClick = (e) => {
    // console.log(e.key);
    if (e.key == "bigSreen") {
      useNavigateGo("/bigSreen");
    } else {
      setCurrent(e.key);
      useNavigateGo(e.key);
    }
  };

  useEffect(() => {
    console.log(nowTheme, "nowTheme");
    if (nowTheme == "dark") {
      setTheme("dark");
    } else {
      setTheme("light");
    }
  }, [nowTheme]);
  return (
    <>
      <div className={nowTheme == "dark" ? sideStyle.root1 : sideStyle.root2}>
        {/* <Switch checked={theme === "dark"} onChange={changeTheme} checkedChildren="Dark" unCheckedChildren="Light" /> */}
        <br />
        <br />
        <Menu
          theme={theme}
          onClick={onClick}
          style={{
            width: 256,
          }}
          defaultOpenKeys={["sub1"]}
          selectedKeys={[current]}
          mode="inline"
          items={items}
        />
      </div>
    </>
  );
}
